import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Icon组件 - 基于Lit的图标组件
 * @element zss-icon
 * @slot - 图标内容插槽
 */
@customElement('zss-icon')
export class ZssIcon extends LitElement {
  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: inherit;
      color: inherit;
    }
    
    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      font-size: inherit;
      color: inherit;
    }
    
    :host([size="small"]) .icon {
      font-size: 14px;
    }
    
    :host([size="medium"]) .icon {
      font-size: 16px;
    }
    
    :host([size="large"]) .icon {
      font-size: 20px;
    }
  `;

  /**
   * 图标大小
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'medium' | 'large' = 'medium';

  /**
   * 图标颜色
   * @attr color
   */
  @property({ type: String })
  color?: string;

  render() {
    return html`
      <span class="icon" style="${this.color ? `color: ${this.color}` : ''}">
        <slot></slot>
      </span>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-icon': ZssIcon;
  }
}